<template>
    <el-dialog v-model="visible" draggable title="修改模板" alignCenter destroyOnClose width="50%" @close="closeModal"
        class="el-dialog-custom">
        <AceEditor ref="AceEditor" v-model="editorValue"></AceEditor>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitDataScope">确 定</el-button>
                <el-button @click="cancelDataScope">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import useBaseApi from "@/api/base/index";
import AceEditor from "@/components/AceEditor/index.vue";
export default defineComponent({
    components: {
        AceEditor,
    },
    props: {
        modelValue: { type: Boolean, default: () => false },
        aceValue: { type: String, default: () => "" },
        readOnly: { type: Boolean, default: () => false },
        record: { type: Object }
    },
    emits: ["update:modelValue", "update:aceValue", "close"],
    setup(props, { emit }) {
        const { callModify } = useBaseApi("/print/printPanel");
        const visible = ref<Boolean>(props.modelValue);
        const editorValue = ref();
        const AceEditor = ref();
        watch(
            () => props.modelValue,
            (value: Boolean) => {
                visible.value = value;
                if (value) {
                    editorValue.value = props.aceValue;
                    openModal();
                }
            }
        );
        //    打开弹窗
        const openModal = () => {
            if (!visible.value) {
                emit("update:modelValue", true);
            }
            return nextTick();
        };
        // 关闭弹窗
        const closeModal = async () => {
            if (visible.value) {
                visible.value = false
                emit("update:modelValue", false);
                await AceEditor.value.destroyEditor();
                emit("close");
            }
            return nextTick();
        };
        // 确认
        const submitDataScope = async () => {
            await callModify({ panelId: props.record?.panelId, panelData: editorValue.value }).then((res) => {
                if (res["code"] == 200) {
                    ElMessage({
                        message: res["msg"],
                        type: "success",
                    });
                } else {
                    ElMessage({
                        message: res["msg"],
                        type: "error",
                    });
                }
            })
            closeModal();
        };
        // 取消
        const cancelDataScope = () => {
            closeModal();
        };

        return {
            visible,
            submitDataScope,
            cancelDataScope,
            closeModal,
            openModal,
            editorValue,
            AceEditor,
        };
    },
});
</script>

<style scoped lang="scss">
:deep(.el-dialog:not(.is-fullscreen)) {
    margin-top: 0 !important;
}
</style>